<template>
  <view class="zyby-img-upload-common auth-img-item" :class="{'img-item-special': !videoUrl}">
    <div v-if="!videoUrl"  @tap="ChooseVideo" class='flex-perfect-center'>
      <!-- <slot name="image"><image :src="imgUrl?imgUrl:'/static/img/btn_data_upload.png'"></image></slot> -->
      <div class="text-desc"><slot>上传视频</slot></div>
    </div>
     <video class="exist-img" controls v-else :src="videoUrl"></video>
                    <!-- <video class="exist-img" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"
                                   @error="videoErrorCallback" controls v-else :src="videoUrl"></video> -->
    <progress class="upload-progress" v-if="progress > 0" :percent="progress" active stroke-width="3"></progress>
    <img class="img-delete" v-if="videoUrl && deleteFlag" src="/static/icon_img/icn_delete.png" @tap="DelImg">
  </view>
</template>

<script>
  import OSSUtil from '../../ossUtil.js'

  export default {
    // props: {
    //   authId: String,
    //   videoUrl: String,
    //   deleteFlag: Boolean,
    // },
    data () {
      return {
		  videoUrl:"",
          progress: 0,
        imgData: {
          visible: false,
          actions: this.imgActions
        }
      }
    },
    methods: {
        async ChooseVideo() {
            let imageSrc = await OSSUtil.getVideo();
            let sign = await OSSUtil.get_STS()
        
            let fileName = OSSUtil.getVideoName(imageSrc);
            
            let uploadTask = uni.uploadFile({
                url: sign.host,
                filePath: imageSrc,
                fileType: '',
                name: 'file',
                formData: {
                    name: imageSrc,
                    'key': fileName,
                    'policy': sign.policy,
                    'OSSAccessKeyId': sign.accessId,
                    'success_action_status': '200',
                    //让服务端返回200,不然，默认会返回204
                    'signature': sign.signature,
                },
                success: (res) => {
                    console.log('res:', res)
                    uni.showToast({
                        title: '上传成功',
                        icon: 'success',
                        duration: 1000
                    });
					this.videoUrl  = sign.host+"/"+fileName
                    // this.$emit('videoUploaded', {data: sign.host + fileName, authId: this.authId});
                },
                fail: (err) => {
                    uni.showModal({
                        content: err.errMsg,
                        showCancel: false
                    });
                }
            });
            uploadTask.onProgressUpdate((res) => {
                console.log("上传进度" + res.progress);
                this.progress = res.progress;
            });
        
            // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
        }
    }    
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  // @import "../style/function.less";
  // @import "../style/variable.less";

  .zyby-img-upload-common {
    height: 450rpx;
    width: 100%;
    margin-top: 26rpx;
  }
  .auth-img-item {
    position: relative;
    > div:first-child {
        height: 100%;
        flex-direction: column;
        image {
        // .square-hw(46)
        }
        .text-desc {
          margin-top: 20rpx;
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          // color: @base-finish-color-deep;
        }
    }
    .exist-img {
        width: 100%;
        height: 100%;
      }
      .upload-progress {
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
      }
    .img-delete {
      // .square-hw(36);
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }
  }
  .img-item-special {
    border: 1px dashed #13DBBF;/*no*/
    border-radius: 6rpx;/*no*/
  }
</style>